<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <template #left>
            <l-panel style="padding-right:0;">
                <template #title>
                    {{$t('字典分类')}}
                    <div class="tree-setting-btn" v-if="lr_hasPageAuth('classifysSetting','buttons')"  >
                        <el-tooltip effect="dark" :content="$t('分类管理')" placement="top">
                            <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
                        </el-tooltip>
                    </div>
                </template>
                <div class="l-rblock" style="padding-bottom:32px" >
                    <div class="l-rblock l-overflow-y">
                        <el-tree class="learun-tree" default-expand-all v-loading="treeLoading" :data="dataItemClassifysTree" :expand-on-click-node="false"  @node-click="handleNodeClick">
                            <span class="lr-tree-node"  slot-scope="{ node }">
                                {{ node.label }}
                            </span>
                        </el-tree>
                    </div>
                    <div class="l-bottom" >
                        <el-input :placeholder="$t('please enter编码/名称')"  @keyup.enter.native="hanleSearchClassifys" v-model="searchClassifysWord" size="mini" >
                            <el-button @click="hanleSearchClassifys" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter编码/名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns  @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <div class="l-rblock" style="padding-bottom:33px" >
                <div class="l-rblock" style="overflow: hidden auto;" >
                    <l-table
                    :columns="columns"
                    :dataSource="tableShowData"
                    :loading="tableLoading" 
                    row-key="f_Id" >
                        <template v-slot:f_EnabledMark="scope" >
                            <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="scope.row.f_EnabledMark"
                                @change="handleEnableChange(scope.row)"
                                >
                            </el-switch>
                        </template>
                        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
                    </l-table>
                </div>
                <div class="l-bottom" >
                    <el-tag v-if="classifyCode" type="warning" size="medium" >{{`${classifyCode}-${classifyName}`}}</el-tag>
                </div>
            </div>
        </l-panel>

        <l-drawer 
            :title="$t('分类管理')"
            :visible.sync="classifysVisible"
            :showOk="false"
            size="800px"

            @opened="handleClassifysOpened"
            >
            <classifys-index ref="classifysIndex"></classifys-index>
        </l-drawer>
        <l-dialog 
            :title="$t(formTitle)"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <dataitem-form ref="form" :classifyTree="classifyTree" :classifyId="classifyId" :pOptions="tableData" ></dataitem-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.data.dataItem
import dataitemForm from './form'
import classifysIndex from './classifysIndex'

export default {
    name:'data-dataitem',
    components: {
        dataitemForm,
        classifysIndex
    },
    props: {
    },
    data () {
        return {
            lr_isPage:true,
            //query
            searchWord:'',
            searchTableData:null,

            treeLoading:false,
            treeData:null,
            searchClassifysWord:'',
            classifysVisible:false,
            classifyCode:'',
            classifyName:'',
            classifyTree:0,
            classifyId:'',

            columns: [
                {label:'项目名',prop:'f_ItemName',minWidth:'100'},
                {label:'项目值',prop:'f_ItemValue',minWidth:'100'},                
                {label:'排序',prop:'f_SortCode',width:'64',align:'center'},
                {label:'有效',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableBtns:[
                {prop:'Edit',label:'Edit',width:40},
                {prop:'Delete',label:'Delete',width:40}
            ],
            tableLoading:false,
            
            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false
        };
    },
    computed:{
        tableData(){
            return this.lr_dataItem[this.classifyCode] || []
        },
        dataItemClassifysTree(){
            return this.$toTree(this.treeData || this.lr_dataItemClassifys.filter(item=>item.f_Type!=1),"f_ItemId","f_ParentId","f_ItemCode","f_ItemName")
        },
        tableShowData(){
            let list = this.searchTableData || this.tableData
            if(this.classifyTree == 1){
                list =  this.$toTree(list,"f_Id","f_ParentId","f_ItemValue","f_ItemName");
            }
            return list;
        }
    },
    mounted () {
        this.initTree()
    },
    methods:{
        async refreshTable(){
            this.searchWord = ''
            this.searchTableData = null
            this.tableLoading = true
            await this.lr_loadDataItem(this.classifyCode,false)
            this.tableLoading = false
        },
        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.tableData.filter(item => item.f_ItemValue.indexOf(this.searchWord) >-1 || item.f_ItemName.indexOf(this.searchWord)>-1);
            }
            else{
                this.searchTableData = null;
            }
        },

        async initTree(){
            this.treeLoading = true
            await this.lr_loadDataItemClassifys(false)
            this.treeLoading = false
        },
        handleSettingClick(){
            this.classifysVisible = true;
        },
        handleClassifysOpened(){
            this.$refs.classifysIndex.init()
        },
        
        hanleSearchClassifys(){
            if(this.searchClassifysWord){
                this.treeData = this.lr_dataItemClassifys.filter(item => item.f_Type!=1 && item.f_ItemCode.indexOf(this.searchClassifysWord) >-1 || item.f_ItemName.indexOf(this.searchClassifysWord)>-1);
            }
            else{
                this.treeData = null
            }
        },
        handleNodeClick(data) {            
            this.classifyCode = data.f_ItemCode
            this.classifyName = data.f_ItemName
            this.classifyTree = data.f_IsTree
            this.classifyId = data.f_ItemId
            this.refreshTable()
        },

        handleEnableChange(row){
            api.updateDetail(row.f_Id,this.$deepClone(row)).then(()=> {
                this.$message({
                    type: 'success',
                    message: this.$t('更新成功!')
                })
            })
        },
        handleAdd(){
            if(this.classifyCode){
                this.formEdit = false;
                this.showForm('Edit data项')
            }
            else{
                this.$message({
                    type: 'warning',
                    message: this.$t('please select数据分类!')
                });
            }
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('Edit data项')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(() => {
                api.removeDetail(row.f_Id).then(()=> {
                    this.$message({
                        type: 'success',
                        message: this.$t('Delete  success')
                    })
                    this.refreshTable()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled')
                })         
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading();
                const formData = this.$refs.form.getForm();
                if(this.formEdit){// 修改数据
                    api.updateDetail(formData.f_Id,this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: this.$t('更新成功!')
                        });
                        this.refreshTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// Edit data
                    api.addDetail(this.classifyCode,this.$deepClone(formData)).then(()=> {
                        hideLoading();
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: this.$t('添加成功!')
                        })
                        this.refreshTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow); 
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm();
        },
        showForm(text){
            this.formTitle = text;
            this.formVisible = true;
        }
    }

}
</script>